<template>
	<vue-content>
	<vue-body>
		<el-table v-loading.body="loading" :data="baseData" border style="width: 70%">
			<el-table-column prop="institutionNo" label="机构编号">
			</el-table-column>
			<el-table-column prop="institutionName" label="机构名称">
			</el-table-column>
			<!-- <el-table-column prop="discount" label="机构折扣">
			</el-table-column> -->
			<el-table-column prop="discount" label="机构折扣">
			</el-table-column>
			<el-table-column prop="checkStatus" label="审核状态">
				<template scope="scope">
					{{ scope.row.checkStatus | checkStatus }}
				</template>
			</el-table-column>
		</el-table>
		<el-table v-loading.body="loading" :data="tableData" border ref="table" @selection-change="handleSelectionChange" style="width: 100%">
			<el-table-column prop="productNo" label="商品编号">
			</el-table-column>
			<el-table-column prop="productName" label="商品名称">
			</el-table-column>
			<el-table-column prop="mchtName" label="商户名称">
			</el-table-column>
			<el-table-column prop="categoryName" label="商品类别名称">
			</el-table-column>
			<el-table-column prop="originalPrice" label="市场价">
			</el-table-column>
			<el-table-column label="商品类型">
				<template scope="scope">
					{{ scope.row.productType | productType }}
				</template>
			</el-table-column>
			<el-table-column label="折扣后价格">
				<template scope="scope">
					<el-input v-model="scope.row.discountPrice" auto-complete="off"></el-input>
				</template>
			</el-table-column>
			<!-- <el-table-column label="规格与价格">
				<template scope="scope">
					<el-button
					size="small"
					type="primary"
					@click="openEdit(scope.$index, scope.row, tableData)">编辑</el-button>
					<el-dialog
					:title="view === 'edit'? '规格组合对应价格编辑': ''"
					:visible="view === 'edit'"
					custom-class="dialogWrapper"
					:before-close="closeDialog">
					<el-input v-model="scope.row.discountPrice" auto-complete="off"></el-input>
	
					<div slot="footer" class="dialog-footer">
						<el-button @click="closeDialog">取 消</el-button>
						<el-button type="primary" @click="closeDialog" :disabled="Subabled">确 定</el-button>
					</div>
					</el-dialog>
				</template>
			</el-table-column> -->
			<el-table-column type="selection" check="true" width="55">
			</el-table-column>
		</el-table>
		<el-button type="primary" class="insProbtn" @click="submit()">提交</el-button>
		<el-button type="primary" v-if="checkStatus !='02' ?true:false" class="insProbtn" @click="cheack()">审批</el-button>
		<el-button type="primary" class="insProbtn" @click="back()">后退</el-button>
		<edit-cheack ref="edit-cheack" @close="editFinish" :view="view" v-if="view ==='cheack'" />
	</vue-body>
	</vue-content>
</template>

<script>
	import { queryInsPro, updateInsPro } from "@/services/institution";
	import { RequestError } from '@/services/errors'
	import { deepClone } from '@/utilities/object'
	import EditCheack from './CheackUrl'
	export default {
		name: "edit-role",
		components: {
			EditCheack
		},
		data: () => ({
			tableData: [],
			baseData: [],
			loading: false,
			institutionNo: "",
			view: '',
			multipleSelection: [],
			productList: [],
			checkStatus:""
		}),
		props: {},
		created() {
			// 取到路由带过来的参数 
			let routerParams = this.$route.query.institutionNo;
			// 将数据放在当前组件的数据内
			this.institutionNo = routerParams;
			this.loadData();
		},
		mounted() {
			this.checked();
		},
		methods: {
			closeDialog() {
				this.$emit("close");
			},
			checked() {
				//首先el-table添加ref="table"引用标识
				for(var data of this.tableData) {
					if(data.isChecked === "1") {
						this.$refs.table.toggleRowSelection(data);
					}
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
				this.productList = [];
				for(var data of this.multipleSelection) {
					this.productList.push(data)
				}
			},
			openEdit(){
				this.view = "edit";
			},
			closeDialog() {
				this.view = "";
			},
			async submit() {
				try {
					this.productList = JSON.stringify(this.productList)
					// console.log(this.productList);
					await updateInsPro({
						institutionNo: this.institutionNo,
						productList: this.productList
					})
					this.$message({
						showClose: true,
						message: "提交成功",
						type: "success"
					});
				} catch(e) {
					if(e instanceof RequestError) {
						this.$alert(e.message, '提示', {
							type: 'error',
							confirmButtonText: '确定'
						})
					} else {
						throw e
					}
				}
				this.loadData()
			},
			async cheack() {
				this.view = 'cheack'
				await this.$nextTick()
        		this.$refs['edit-cheack'].institutionNo = this.institutionNo
        		this.$refs['edit-cheack'].checkNo = this.baseData[0].checkNo
        		this.$refs['edit-cheack'].CheackUrl()
			},
			async loadData() {
				this.loading = true
				try {
					let data = await queryInsPro(this.institutionNo)
					data.data.discount = data.data.discount +"%"
					this.baseData = []
					this.baseData.push(data.data)
					this.tableData = data.data.product
					this.checkStatus = this.baseData[0].checkStatus
//					console.log(this.checkStatus)
					this.$nextTick(function() {
						this.checked(); //每次更新了数据，触发这个函数即可。
					})
				} catch(e) {
					if(e instanceof RequestError) {
						this.$alert(e.message, '提示', {
							type: 'error',
							confirmButtonText: '确定'
						})
					} else {
						throw e
					}
				}
				this.loading = false
			},
			back() {
				this.$router.go(-1)
			},
			editFinish(needRefresh) {
				this.view = ''
				if(needRefresh) {
					this.$nextTick(() => {
						// dom元素更新后执行， 因此此处能正确打印出更改之后的值；
						this.loadData()
					})
				}
			}
		},
		filters: {
			isChecked(value) {
				return {
					0: 'false',
					1: 'true'
				}[value]
			},
			productType(value) {
				return {
					1: '实物',
					2: '彩票',
					3: '券/虚拟'
				}[value]
			},
			checkStatus(value) {
				return {
					'01': '待审核',
					'02': '审核通过',
					'03': '审核不通过'
				}[value]
			}
		}
	};
</script>

<style>
	.el-table th>.cell {
		text-align: center;
	}
	
	.insProbtn {
		float: right;
		margin-left: 10px;
	}
</style>